<template>
    <div class="chart-container">
        <div ref="chartRef" style="width: 100%; height: 1000px;"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";

export default {
    name: "BarCharts",
    data() {
        return {
            chartInstance: null,
        };
    },
    mounted() {
        this.initChart();
    },
    beforeDestroy() {
        if (this.chartInstance) {
            this.chartInstance.dispose();
        }
    },
    methods: {
        initChart() {
            // 初始化 ECharts 实例
            this.chartInstance = echarts.init(this.$refs.chartRef);
            // 原始数据
            const originalData = [
                { name: "The Prodigy Voodoo People", value: 1918184 },
                { name: "The Prodigy Voodoo People (05 Edit)", value: 1918184 },
                { name: "The Prodigy Voodoo People [Chemical Brothers Remix]", value: 1918184 },
                { name: "Riton Who's There? (Doorly Remix)", value: 1285338 },
                { name: "Riton Put That on My Momma", value: 1285338 },
                { name: "Supercombo Matagal", value: 1045120 },
                { name: "Ramones Commando", value: 870899 },
                { name: "Cansei de Ser Sexy This Month, Day 10", value: 787405 },
                { name: "Cansei de Ser Sexy This Month Day 10", value: 787405 },
                { name: "Cansei de Ser Sexy This Month, Day Ten", value: 787405 },
                { name: "Cansei de Ser Sexy Too Hot", value: 787405 },
                { name: "José González Cycling Trivialities", value: 781269 },
                { name: "José González Cycling Trivialities (Radio edit)", value: 781269 },
                { name: "Crystal Fighters Xtatic Truth", value: 690559 },
                { name: "Megadeth Gears Of War", value: 477311 },
                { name: "増田俊郎 Sadness and Sorrow", value: 407676 },
                { name: "増田俊郎 Sakura's Theme", value: 407676 },
                { name: "増田俊郎 Sarutobi", value: 407676 },
                { name: "増田俊郎 Sasuke's Theme", value: 407676 },
                { name: "増田俊郎 Sasuke ~Destiny~", value: 407676 },
                { name: "The Static Age Skyscrapers", value: 383518 },
                { name: "Nação Zumbi Nascedouro", value: 367773 },
                { name: "Nação Zumbi Nebulosa", value: 367773 },
                { name: "Nação Zumbi No Olimpo", value: 367773 },
                { name: "The Dave Brubeck Quartet Strange Meadow Lark", value: 367595 },
                { name: "The Dave Brubeck Quartet Take Five", value: 367595 },
                { name: "Nação Zumbi Originais do Sonho", value: 358990 },
                { name: "Christina Aguilera Dynamite", value: 332313 },
                { name: "No Devotion 10,000 Summers", value: 331029 },
                { name: "Radionomy Radionomy", value: 319979 },
                { name: "Pitbull Fireball", value: 289367 },
                { name: "Pitbull Juice Box", value: 289367 },
                { name: "Pitbull Jungle Fever", value: 289367 },
                { name: "deadmau5 Raise Your Weapon - Madeon Extended Remix", value: 276826 },
                { name: "deadmau5 Raise Your Weapon (Madeon Extended Remix)", value: 276826 },
                { name: "deadmau5 Raise Your Weapon (Madeon Remix)", value: 276826 },
                { name: "Emilíana Torrini Sea People", value: 273186 },
                { name: "Emilíana Torrini Serenade", value: 273186 },
                { name: "Paul Johnson Get Get Down", value: 263230 },
                { name: "Guf Ice Baby", value: 254287 },
                { name: "Guf Metropolitan Mail", value: 254287 },
                { name: "Koop Whenever There Is You", value: 252417 },
                { name: "Koop Whenever There Is You (feat. Yukimi Nagano)", value: 252417 },
                { name: "Koop Words of Tranquility", value: 252417 },
                { name: "Machine Head Nothing Left", value: 244918 },
                { name: "Touché Amoré The Great Repitition", value: 241740 },
                { name: "Slagsmålsklubben Malmö Beach Night Party", value: 240390 },
                { name: "Slagsmålsklubben Nya krafter", value: 240390 },
                { name: "OutKast Hey Ya! - Radio Mix / Club Mix", value: 238828 },
                { name: "OutKast Hey Ya! (Radio Mix/Club Mix)", value: 238828 },
            ];

            // 按播放量降序排序
            const sortedData = originalData.sort((a, b) => a.value - b.value);

            // 提取排序后的名称和播放量
            const names = sortedData.map(item => item.name);
            const values = sortedData.map(item => item.value);

            // 图表配置
            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c}'
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "0%",
                    containLabel: true,
                },
                xAxis: {
                    type: "value",
                    boundaryGap: [0, 0.01],
                },
                yAxis: {
                    type: "category",
                    data: names, // 使用排序后的名称
                },
                series: [
                    {
                        name: "播放量",
                        type: "bar",
                        data: [
                            { name: "The Prodigy Voodoo People", value: 1918184 },
                            { name: "The Prodigy Voodoo People (05 Edit)", value: 1918184 },
                            { name: "The Prodigy Voodoo People [Chemical Brothers Remix]", value: 1918184 },
                            { name: "Riton Who's There? (Doorly Remix)", value: 1285338 },
                            { name: "Riton Put That on My Momma", value: 1285338 },
                            { name: "Supercombo Matagal", value: 1045120 },
                            { name: "Ramones Commando", value: 870899 },
                            { name: "Cansei de Ser Sexy This Month, Day 10", value: 787405 },
                            { name: "Cansei de Ser Sexy This Month Day 10", value: 787405 },
                            { name: "Cansei de Ser Sexy This Month, Day Ten", value: 787405 },
                            { name: "Cansei de Ser Sexy Too Hot", value: 787405 },
                            { name: "José González Cycling Trivialities", value: 781269 },
                            { name: "José González Cycling Trivialities (Radio edit)", value: 781269 },
                            { name: "Crystal Fighters Xtatic Truth", value: 690559 },
                            { name: "Megadeth Gears Of War", value: 477311 },
                            { name: "増田俊郎 Sadness and Sorrow", value: 407676 },
                            { name: "増田俊郎 Sakura's Theme", value: 407676 },
                            { name: "増田俊郎 Sarutobi", value: 407676 },
                            { name: "増田俊郎 Sasuke's Theme", value: 407676 },
                            { name: "増田俊郎 Sasuke ~Destiny~", value: 407676 },
                            { name: "The Static Age Skyscrapers", value: 383518 },
                            { name: "Nação Zumbi Nascedouro", value: 367773 },
                            { name: "Nação Zumbi Nebulosa", value: 367773 },
                            { name: "Nação Zumbi No Olimpo", value: 367773 },
                            { name: "The Dave Brubeck Quartet Strange Meadow Lark", value: 367595 },
                            { name: "The Dave Brubeck Quartet Take Five", value: 367595 },
                            { name: "Nação Zumbi Originais do Sonho", value: 358990 },
                            { name: "Christina Aguilera Dynamite", value: 332313 },
                            { name: "No Devotion 10,000 Summers", value: 331029 },
                            { name: "Radionomy Radionomy", value: 319979 },
                            { name: "Pitbull Fireball", value: 289367 },
                            { name: "Pitbull Juice Box", value: 289367 },
                            { name: "Pitbull Jungle Fever", value: 289367 },
                            { name: "deadmau5 Raise Your Weapon - Madeon Extended Remix", value: 276826 },
                            { name: "deadmau5 Raise Your Weapon (Madeon Extended Remix)", value: 276826 },
                            { name: "deadmau5 Raise Your Weapon (Madeon Remix)", value: 276826 },
                            { name: "Emilíana Torrini Sea People", value: 273186 },
                            { name: "Emilíana Torrini Serenade", value: 273186 },
                            { name: "Paul Johnson Get Get Down", value: 263230 },
                            { name: "Guf Ice Baby", value: 254287 },
                            { name: "Guf Metropolitan Mail", value: 254287 },
                            { name: "Koop Whenever There Is You", value: 252417 },
                            { name: "Koop Whenever There Is You (feat. Yukimi Nagano)", value: 252417 },
                            { name: "Koop Words of Tranquility", value: 252417 },
                            { name: "Machine Head Nothing Left", value: 244918 },
                            { name: "Touché Amoré The Great Repitition", value: 241740 },
                            { name: "Slagsmålsklubben Malmö Beach Night Party", value: 240390 },
                            { name: "Slagsmålsklubben Nya krafter", value: 240390 },
                            { name: "OutKast Hey Ya! - Radio Mix / Club Mix", value: 238828 },
                            { name: "OutKast Hey Ya! (Radio Mix/Club Mix)", value: 238828 }
                        ].sort(function (a, b) { return a.value - b.value; }), // 使用排序后的播放量
                        barWidth: 10,
                    },

                ],
            };

            // 设置图表配置
            this.chartInstance.setOption(option);
        },
    },
};
</script>

<style scoped>
.chart-container {
    width: 100%;
    height: 500px; /* 设置固定高度 */
    overflow-y: auto; /* 添加滚动条 */
}
</style>